<template>
    <pane :title="title" v-if="listCount.length">
        <template slot="content">
            <ul class="module-content video-list" ga_event="click_video_recommend">
                <li class="video-item" v-for="item in listCount">
                    <a :href="item.display_url" target="_blank" class="link">
                        <dl>
                            <dt class="module-pic">
                                <img v-lazy="item.pc_image_url" :alt="item.title" />
                                <i class="module-tag video-tag"><span>{{ item.video_duration_format }}</span></i>
                            </dt>
                            <dd>
                                <div class="cell">
                                    <h4>{{ item.title }}</h4>
                                    <p>
                                        <span>{{ item.video_play_count | formatCount }}次播放&nbsp;</span><span>&sdot;&nbsp;{{ item.comment_count | formatCount }}评论</span>
                                    </p>
                                </div>
                            </dd>
                        </dl>
                    </a>
                </li>
            </ul>
        </template>
    </pane>
</template>

<style lang="less">
    @import "./hotvideos.less";
</style>

<script>
  import reqwest from 'reqwest'
  import { numFormat } from '../../../src/js/utils.js'
  import Pane from '../../pane'

  export default {
    name: 'HotVideos',
    data () {
      return {
        list: []
      }
    },
    mounted () {
      reqwest({
        url: this.getHotVideosUrl,
        data: {
          widen: 1
        },
        method: 'get',
        success: (response) => {
          if (response.data) {
            this.list = response.data
          }
        }
      })
    },
    props: {
      count: {
        type: Number,
        default: 4
      },
      title: {
        type: String,
        default: '热门视频'
      },
      getHotVideosUrl: {
        type: String,
        default: '/api/pc/hot_video/'
      }
    },
    computed: {
      listCount: function () {
        return this.list.slice(0, this.count)
      }
    },
    filters: {
      formatCount: function (value) {
        if (!value) return '0'
        value = numFormat(value)
        return value
      }
    },
    components: {
      Pane
    }
  }
</script>



// WEBPACK FOOTER //
// hotvideos.vue?4fbfe686